<template>
    <div class="card-box">
        <el-row class="mb20">
            <el-col :md="20">
                <el-button type="primary" @click="dialogVisible = true">高级查询</el-button>
                <el-button type="primary">导出</el-button>
                <el-button type="primary" @click="getCarrierData">
                    <i class="el-icon-refresh"></i>
                </el-button>
            </el-col>
            <el-dialog title="批量操作查询" :visible.sync="dialogVisible" width="40%">
                <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="批量操作类型：">
                        <el-select v-model="ruleForm.type" filterable placeholder="请选择" class="w100">
                            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作时间：">
                        <div class="block">
                            <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="selectCarrier">查询</el-button>
                    </span>
            </el-dialog>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column label="批量操作批次" width="160">
                <template slot-scope="scope">
                    <span class="link" @click="getDetail(scope.row)">{{ scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="批量操作类型" width="160">
            </el-table-column>
            <el-table-column prop="all_num" label="卡号总数" width="140">
            </el-table-column>
            <el-table-column prop="success_num" label="操作成功数" width="140">
            </el-table-column>
            <el-table-column prop="err_num" label="操作失败数">
            </el-table-column>
            <el-table-column prop="cao_per" label="操作人" width="140">
            </el-table-column>
            <el-table-column label="操作时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.time}}</span>
                </template>
            </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    type: '',
                    value1: ''
                },
                type: [
                    {
                        value: '选项一',
                        label: '数据同步'
                    },
                    {
                        value: '选项二',
                        label: '导入卡号'
                    }
                ],
                dialogVisible: false,
                tableData: [
                    {
                        id: '1',
                        name: '00000647',
                        type: '卡号划拨',
                        all_num: '1',
                        success_num: '1',
                        err_num: '0',
                        cao_per: 'iotboss',
                        time: '2018-07-12 17:58:52'
                    }
                ]
            }
        },
        methods: {
            getDetail(goods) {
                this.$router.push({
                    path: `/batch_operation_records/${goods.id}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100, .el-range-editor.el-input__inner {
        width: 100%;
    }
</style>